import React from 'react';
import my from '../../assets/css/home/my.module.css'
import {Link} from "react-router-dom";

export default class UserIndex extends React.Component{
    constructor(){
        super();
        this.state={
            show:false,
            isShow:false,
            sHead:localStorage['imgHead']
        }
    }
    componentWillMount(){
        if (localStorage.isLogin){
            this.setState({show:true});
        } else {
            this.setState({show:false});
        }
    }
    outLogin(){
        if(this.state.uid!==""){
            const parmas=new URLSearchParams();
            parmas.append('uid',this.state.uid);
            fetch('http://vueshop.glbuys.com/api/home/user/safeout?token=1ec949a15fb709370f',{
                method:'POST',
                body:parmas
            }).then(res=> res.json())
                .then(res=>{
                    console.log(res);
                    if(res.code===200){
                        this.setState({isShow:false});
                        localStorage.removeItem("isLogin");
                        localStorage.removeItem("uid");
                        localStorage.removeItem("aid");
                        localStorage.removeItem("path");
                        localStorage.removeItem("nickname");
                        localStorage.removeItem("goods");
                        localStorage.removeItem("goodOne");
                        localStorage.removeItem("search");
                        localStorage['imgHead']='/images/user/my/default-head.png';
                        this.setState({sHead:'/images/user/my/default-head.png'});
                        this.componentWillMount()
                    }
                })
        }
    }
    out(){
        this.setState({isShow:true})
    }
    outModal(){
        this.setState({isShow:false})
    }

    render() {
        return(
            <div className={my.boxUser}>
                <h3>个人中心</h3>
                <div className={my.boxDiv}>
                    <img src={this.state.sHead} alt=''/>
                    <p>
                        <span>昵称：{localStorage['nickname']}</span>
                        我的积分：0
                    </p>
                </div>
                <div className={my.boxDivOne}>
                    <p>
                        全部订单
                        <Link to='/user/order/orders' style={{color:'black'}}>
                            <span>
                                查看全部订单 >
                            </span>
                        </Link>
                    </p>
                    <ul>
                        <li>
                            <Link to='/user/order/paid?status=0' style={{color:'black'}}>
                                <img src={require('../../assets/images/user/my/pay.png')} alt=''/>
                                <p>待支付</p>
                            </Link>
                        </li>
                        <li>
                            <Link to='/user/order/harvested?status=1' style={{color:'black'}}>
                                <img src={require('../../assets/images/user/my/shouhuo.png')} alt=''/>
                                <p>待收货</p>
                            </Link>
                        </li>
                        <li>
                            <Link to='/user/order/evaluated?status=2' style={{color:'black'}}>
                                <img src={require('../../assets/images/user/my/comment.png')} alt=''/>
                                <p>待评价</p>
                            </Link>
                        </li>
                    </ul>
                </div>
                <ul className={my.boxUl}>
                    <Link to={'/user/profile'}>
                        <li>
                            个人资料
                            <img src={require('../../assets/images/common/right_arrow.png')} alt='' />
                        </li>
                    </Link>
                    <Link to={'/user/address'}>
                        <li>
                            收货地址
                            <img src={require('../../assets/images/common/right_arrow.png')} alt='' />
                        </li>
                    </Link>
                    <li>
                        绑定手机
                        <img src={require('../../assets/images/common/right_arrow.png')} alt='' />
                    </li>
                    <Link to={'/user/password'}>
                        <li>
                            修改密码
                            <img src={require('../../assets/images/common/right_arrow.png')} alt='' />
                        </li>
                    </Link>
                    <Link to={'/user/fav'}>
                        <li>
                            我的收藏
                            <img src={require('../../assets/images/common/right_arrow.png')} alt='' />
                        </li>
                    </Link>
                </ul>
                <div className={my.boxBtn}>
                    <Link to="/login/login"><button className={!this.state.show?my.show:my.hide}>登陆/注册</button></Link>
                    <button className={this.state.show? my.show:my.hide} onClick={this.out.bind(this)}>安全退出</button>
                    <div className={this.state.isShow? my.show:my.hide}>
                        <div className={my.modal}>
                            <div className={my.modals}>
                                <h4>确定要退出吗？</h4>
                                <p onClick={this.outModal.bind(this)}>取消</p >
                                <p onClick={this.outLogin.bind(this)}>确认</p >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}